<template>
  <Dialog v-model="visible" :title="dialogTitle" width="960px">
    <div v-loading="loading" class="max-h-70vh">
      <el-scrollbar height="65vh">
        <el-divider content-position="left">基础信息</el-divider>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="姓名">{{ text(detail?.name) }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ text(detail?.sex) }}</el-descriptions-item>
          <el-descriptions-item label="出生年月">{{ date(detail?.dateOfBirth) }}</el-descriptions-item>
          <el-descriptions-item label="民族">{{ text(detail?.nation) }}</el-descriptions-item>
          <el-descriptions-item label="学历">{{ text(detail?.education) }}</el-descriptions-item>
          <el-descriptions-item label="专业">{{ text(detail?.major) }}</el-descriptions-item>
          <el-descriptions-item label="身高">{{ height(detail?.height) }}</el-descriptions-item>
          <el-descriptions-item label="健康状况">{{ text(detail?.healthCondition) }}</el-descriptions-item>
          <el-descriptions-item label="婚姻状况">{{ text(detail?.marriageState) }}</el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">面试信息</el-divider>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="应聘岗位">{{ text(detail?.post) }}</el-descriptions-item>
          <el-descriptions-item label="应聘渠道">{{ text(detail?.channels) }}</el-descriptions-item>
          <el-descriptions-item label="邀约人">{{ text(detail?.inviter) }}</el-descriptions-item>
          <el-descriptions-item label="面试时间">{{ dateTime(detail?.interviewTime) }}</el-descriptions-item>
          <el-descriptions-item label="面试结果">{{ text(detail?.interviewResult) }}</el-descriptions-item>
          <el-descriptions-item label="跟进结果">
            <span class="whitespace-pre-line">{{ text(detail?.trailResult) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="约定入职日期">{{ dateTime(detail?.agreeDate) }}</el-descriptions-item>
          <el-descriptions-item label="是否录用">{{ text(detail?.whetherToHire) }}</el-descriptions-item>
          <el-descriptions-item label="不录用原因">
            <span class="whitespace-pre-line">{{ text(detail?.noHireCause) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="状态" :span="3">
            <el-tag v-if="statusInfo" :type="statusInfo.tagType" disable-transitions>
              {{ statusInfo.label }}
            </el-tag>
            <span v-else>-</span>
          </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">联系信息</el-divider>
        <el-descriptions :column="3" border size="small">
          <el-descriptions-item label="手机">{{ text(detail?.urgentPhone) }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">{{ text(detail?.cardId) }}</el-descriptions-item>
          <el-descriptions-item label="政治面貌">{{ text(detail?.politicalOutlook) }}</el-descriptions-item>
          <el-descriptions-item label="现住地址" :span="3">
            <span class="whitespace-pre-line">{{ text(detail?.currentAddress) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="户籍地址" :span="3">
            <span class="whitespace-pre-line">{{ text(detail?.address) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人">{{ text(detail?.emergencyContact) }}</el-descriptions-item>
          <el-descriptions-item label="关系">{{ text(detail?.relation) }}</el-descriptions-item>
          <el-descriptions-item label="联系人电话">{{ text(detail?.emergencyContactPhone) }}</el-descriptions-item>
          <el-descriptions-item label="上一份薪资">{{ text(detail?.lastSalary) }}</el-descriptions-item>
          <el-descriptions-item label="期望薪资">{{ text(detail?.expectedSalary) }}</el-descriptions-item>
          <el-descriptions-item label="可到岗时间">{{ text(detail?.arrivalTime) }}</el-descriptions-item>
          <el-descriptions-item label="离职原因" :span="3">
            <span class="whitespace-pre-line">{{ text(detail?.leaveCause) }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="初试官">{{ text(detail?.preliminaryUser) }}</el-descriptions-item>
          <el-descriptions-item label="复试官">{{ text(detail?.reexamineUser) }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="3">
            <span class="whitespace-pre-line">{{ text(detail?.remark) }}</span>
          </el-descriptions-item>
        </el-descriptions>

        <el-divider content-position="left">学习经历</el-divider>
        <el-empty v-if="!studyList.length" description="暂无学习经历" />
        <el-table v-else :data="studyList" border size="small">
          <el-table-column label="起止时间" width="220">
            <template #default="{ row }">
              {{ rangeDate(row.startDate, row.endDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="school" label="学校" min-width="160" />
          <el-table-column prop="major" label="专业" min-width="160" />
          <el-table-column prop="post" label="荣誉 / 职务" min-width="160" />
          <el-table-column prop="graduation" label="是否毕业" width="120" />
        </el-table>

        <el-divider content-position="left">工作经历</el-divider>
        <el-empty v-if="!workList.length" description="暂无工作经历" />
        <el-table v-else :data="workList" border size="small">
          <el-table-column label="起止时间" width="220">
            <template #default="{ row }">
              {{ rangeDate(row.startDate, row.endDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="company" label="工作单位" min-width="180" />
          <el-table-column prop="post" label="岗位 / 职务" min-width="160" />
          <el-table-column prop="certifier" label="证明人" min-width="140" />
          <el-table-column prop="phone" label="联系方式" min-width="140" />
          <el-table-column prop="description" label="工作内容" min-width="200" show-overflow-tooltip />
        </el-table>

        <el-divider content-position="left">家庭成员</el-divider>
        <el-empty v-if="!familyList.length" description="暂无家庭成员" />
        <el-table v-else :data="familyList" border size="small">
          <el-table-column prop="name" label="姓名" min-width="120" />
          <el-table-column prop="relation" label="关系" min-width="120" />
          <el-table-column prop="age" label="年龄" width="90" />
          <el-table-column prop="company" label="工作单位" min-width="180" />
          <el-table-column prop="post" label="岗位" min-width="140" />
          <el-table-column prop="phone" label="联系方式" min-width="140" />
          <el-table-column prop="remark" label="备注" min-width="180" show-overflow-tooltip />
        </el-table>
      </el-scrollbar>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import type {
  RecruitInterview,
  RecruitInterviewFamilyItem,
  RecruitInterviewStudyItem,
  RecruitInterviewWorkItem
} from '@/api/business/hr/recruit/interview'
import { RecruitInterviewApi } from '@/api/business/hr/recruit/interview'
import { findInterviewStatus } from '@/views/business/hr/recruit/constants'

const visible = ref(false)
const loading = ref(false)
const detail = ref<RecruitInterview>()
const studyList = ref<RecruitInterviewStudyItem[]>([])
const workList = ref<RecruitInterviewWorkItem[]>([])
const familyList = ref<RecruitInterviewFamilyItem[]>([])

const dialogTitle = computed(() => {
  if (!detail.value?.name) {
    return '面试详情'
  }
  return `面试详情 - ${detail.value.name}`
})

const statusInfo = computed(() => findInterviewStatus(detail.value?.status))

const text = (val?: string | number | null) => {
  if (val === 0 || val) {
    return String(val)
  }
  return '-'
}

const date = (val?: string | null) => {
  if (!val) {
    return '-'
  }
  const parsed = dayjs(val)
  return parsed.isValid() ? parsed.format('YYYY-MM-DD') : String(val)
}

const dateTime = (val?: string | null) => {
  if (!val) {
    return '-'
  }
  const parsed = dayjs(val)
  return parsed.isValid() ? parsed.format('YYYY-MM-DD HH:mm') : String(val)
}

const rangeDate = (start?: string | null, end?: string | null) => {
  const startText = start ? date(start) : '-'
  const endText = end ? date(end) : '至今'
  return `${startText} ~ ${endText}`
}

const height = (val?: number | string | null) => {
  if (val === 0 || val) {
    const num = Number(val)
    if (!Number.isNaN(num) && Number.isFinite(num)) {
      return `${num} cm`
    }
    return String(val)
  }
  return '-'
}

function parseList<T>(raw?: string | null) {
  if (!raw) {
    return []
  }
  try {
    const parsed = JSON.parse(raw)
    return Array.isArray(parsed) ? (parsed as T[]) : []
  } catch {
    return []
  }
}

const open = async (id: number) => {
  visible.value = true
  loading.value = true
  try {
    const data = await RecruitInterviewApi.getRecruitInterview(id)
    detail.value = data
    studyList.value = parseList<RecruitInterviewStudyItem>(data.studyList)
    workList.value = parseList<RecruitInterviewWorkItem>(data.workList)
    familyList.value = parseList<RecruitInterviewFamilyItem>(data.familyList)
  } finally {
    loading.value = false
  }
}

const close = () => {
  visible.value = false
}

defineExpose({ open, close })
</script>
